<template>
  <div>
    <div class="nyXq">
      <div class="nyXqLi" v-for="item in chooseTop">
        <div class="nyxqIco">
          <img :src="item.ico" alt="" />
        </div>
        <div class="nyxqTxt">
          <p>{{ item.name }}</p>
          <p>
            <span :class="item.value.color">{{ item.value.val }}</span>
            {{ item.value.unit }}
          </p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "App",
  props: {
    chooseTop: {
      type: Array,
      default: [],
    },
  },
};
</script>
<style lang="scss" scoped>
.nyXq {
  display: flex;
  color: #fff;
  justify-content: center;
  position: absolute;
  top: 7.5rem;
  left: 50%;
  transform: translateX(-50%);

  .zsTopLi {
    background: url(~assets/img/sy/topBg.png) no-repeat;
    width: 12.5rem;
    height: 6.25rem;
    background-size: 100% 100%;
    text-align: center;
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
    p {
      margin: 0;
      width: 100%;
    }
    p:nth-child(1) {
      font-family: "shuzi";
      font-size: 2.5rem;
      color: #3efff4;
    }
    p:nth-child(2) {
      font-size: 0.875rem;
    }
  }

  .nyXqLi {
    display: flex;
    align-items: center;
    font-family: "shuzi";
    margin: 0 1.875rem;

    .nyxqIco {
      width: 3.625rem;
      margin-right: 0.625rem;

      img {
        width: 100%;
      }
    }

    .nyxqTxt {
      p {
        white-space: nowrap;
        margin: 0 0.3125rem;
        font-size: 0.875rem;

        span {
          font-size: 1.625rem;
          margin-right: 0.3125rem;
        }
      }
    }
  }

  .color1 {
    color: #48ece7;
  }

  .color2 {
    color: #ffd452;
  }

  .color3 {
    color: #47a2ff;
  }

  .color4 {
    color: #47ff88;
  }

  .color5 {
    color: #ff7b47;
  }
}
</style>